<template>
  <div id="login" class="login_page">
    <div class="wraper_login">
      <div class="net_title">{{welcome}}</div>
      <el-form ref="AccountFrom" :model="account" :rules="rules" label-width="0px">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            class="input_login"
            v-model="account.username"
            placeholder="请输入用户名"
            auto-complete="off"
            clearable
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            class="input_login"
            v-model="account.password"
            placeholder="请输入密码"
            clearable
            show-password
          ></el-input>
        </el-form-item>
        <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
        <!-- 登录按钮 -->
        <el-form-item prop="username">
          <el-button class="btn_login" type="primary" @click.native.prevent="onSubmit" :loading="logining">立即登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Mock from '../mock'
import { requestLogin } from "../api/api";
export default {
  data() {
    return {
      welcome: "欢迎使用电话簿系统",
      logining: false,
      account: {
        username: "daizhen",
        password: "daizhen888"
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" }
          //{ validator: validaePass }
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" }
          //{ validator: validaePass2 }
        ]
      },
      checked: true
    };
  },
  mounted() {

  },
  methods: {
    onSubmit() {
      this.$refs.AccountFrom.validate(valid => {
        if (valid) {
          this.logining = true;
          //NProgress.start();
          var loginParams = {
            username: this.account.username,
            password: this.account.password
          };
          //  let loginParams = new URLSearchParams();
          //  loginParams.append("username",this.account.username);
          //  loginParams.append("password",this.account.pwd);
          console.log(loginParams);

          requestLogin(loginParams).then(data => {
            //  debugger;
            this.logining = false;

            let { msg, code, token } = data;
            console.log(token);
            if (code == "200") {
              //登录成功，把用户信息保存在sessionStorage中
              sessionStorage.setItem("access-token", token);
              this.$message({
                message: '登录成功',
                type: 'success'
              });
              //跳转到后台主界面
              setTimeout(() => {
                this.$router.push({ path:'/manage'  })
              }, 1000);
            } else {
              this.$message({
                message: msg,
                type: "error"
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      // console.log('submit!');
      // var username = this.account.username;
      // var password = this.account.password;
      // if (username=='') {
      //   this.$message.error('请输入用户名');
      // }else if (password=='') {
      //   this.$message.error('请输入密码');
      // }else{
      //   this.$message({
      //     message: '登录成功',
      //     type: 'success'
      //   });
      //   setTimeout(() => {
      //     this.$router.push({ path:'/manage'  })
      //   }, 1000);
      // }
    }
  },
  created(){
    
    // 使用 mock
    Mock.login()
  }
};
</script>

<style>
.login_page {
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(
    96deg,
    rgba(45, 112, 255, 1) 0%,
    rgba(53, 116, 250, 1) 100%
  );
}
.login_page .net_title {
  padding: 0 0 30px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}
.login_page .remember{
  margin-bottom: 20px;
}
.login_page .wraper_login {
  position: fixed;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 40px 30px 20px;
  width: 360px;
  background: #fff;
  border-radius: 4px;
}
.login_page .btn_login {
  width: 100%;
  background: #3574fa;
}

</style>